<template>
<div style="width:100%; margin:0 auto;">
<div style="width:100%; height:40px">
  <i class="el-icon-d-caret"  style="width:1%;margin-left:300px"></i>
  <el-input
  v-model="searchlist"
  style="width:25%;margin-left:100px"
  placeholder="请输入车间名称"
  clearable>
</el-input>
 <el-button  @click="search()" style="width:10%;margin-left:20px">查找</el-button>
 <el-button  @click="add()" style="width:10%;margin-left:20px">增加</el-button>
 <i class="el-icon-d-caret"  style="width:1%;margin-left:100px"></i>
</div>
  <el-table
    :data="this.$store.state.produce_workshop"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="id"
      label="编号"
      width="200">
    </el-table-column>
    <el-table-column
      prop="name"
      label="名称"
      width="200">
    </el-table-column>
    <el-table-column
      prop="localtion"
      label="位置"
      width="250">
    </el-table-column>
    <el-table-column
      prop="remark"
      label="备注"
      width="250">
    </el-table-column>
    <el-table-column
      prop="gmt_create"
      label="创建时间"
      sortable
      width="300">
    </el-table-column>
    <el-table-column
      prop="gmt_modify"
      label="修改时间"
      sortable
      width="300">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="200">
      <template slot-scope="scope">
        <el-button @click="xiugai(scope.$index, scope.row)" type="text" size="small">修改</el-button>
      <el-button  @click.native.prevent="deleteRow(scope.$index)" type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    <div align="center">
              <el-pagination
                  @current-change="handleCurrentChange"
                  next-click="next()"
                  :current-page="currentPage"
                  :page-size="pagesize"
                  layout=" prev, pager, next, jumper"
                  :total="totalCount">
              </el-pagination>
          </div>
   <el-dialog
  title="编辑"
  :visible.sync="dialogVisible"
  width="25%"
  :before-close="handleClose">
<a  style="font-weight:bold">名称：</a>
<el-input  v-model="updateData.name"></el-input>
<a style="font-weight:bold">位置：</a>
<el-input  v-model="updateData.localtion"></el-input>
<a style="font-weight:bold">备注：</a>
<el-input  v-model="updateData.remark"></el-input>
<a style="font-weight:bold">创建时间：</a>
<el-input  v-model="updateData.gmt_create"></el-input>
<a style="font-weight:bold">修改时间：</a>
<el-input  v-model="updateData.gmt_modify"></el-input>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="ok()">确 定</el-button>
  </span>
</el-dialog>
<el-dialog
  title="修改密码"
  :visible.sync="centerDialogVisible"
  width="30%"
  center>
  <!-- <a style="font-weight:bold">编号:</a>
  <el-input v-model="addnewlist.id"></el-input> -->
  <a style="font-weight:bold">名称:</a>
   <el-input v-model="addnewlist.name"></el-input>
   <a style="font-weight:bold">位置:</a>
   <el-input v-model="addnewlist.localtion"></el-input>
   <a style="font-weight:bold">备注:</a>
   <el-input v-model="addnewlist.remark"></el-input>
   <a style="font-weight:bold">创建时间:</a>
   <el-input v-model="addnewlist.gmt_create"></el-input>
   <a style="font-weight:bold">修改时间:</a>
   <el-input v-model="addnewlist.gmt_modify"></el-input>
  <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addlist()">确 定</el-button>
  </span>
</el-dialog>
</div>
</template>

<script>
import workshop from '../../comservice/workshop'
import store from '../vuex/workshop.js'
import Vue from 'vue'
export default {
  store,

  data() {
    return {
      // 多选数组
      multipleSelection: [],
      // 请求的URL
      url: 'newstu/querystudentbypage',
      // 搜索条件
      criteria: '',
      // 下拉菜单选项
      select: '',
      // 默认每页数据量
      pagesize: 2,
      // 默认高亮行数据id
      highlightId: -1,
      // 当前页码
      currentPage: 1,
      // 查询的页码
      start: 1,
      // 默认数据总数
      totalCount: 0,
      dialogVisible: false,
      centerDialogVisible: false,
      // mima: '2323423',
      input: '',
      searchlist: '',
      updateData: {},
      searchStr: '', // 新增
      filterType: '',
      addnewlist: {},
      searchnewlist: [{}],
      item: [{}],
      filterDates: null,
      produce_workshop: [{
        id: '',
        name: '',
        localtion: '',
        remark: '',
        gmt_create: '',
        gmt_modify: ''
      }]
    }
  },
  created() {
    workshop.getshoplist().then((res) => {
      if (res.code === 0) {
        this.handleCurrentChange(1)
        this.totalCount = this.$store.state.totalPage * 2
        console.log(this.totalCount)
      } else {
        alert('数据获取失败')
      }
    })
    // workshop.getshoplist()
    // this.handleCurrentChange(1)
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.$store.commit('fanye', { data: val })
      // for (let i = 0; i < this.pagesize; i++) {
      //   console.log(i)
      // }
    },
    deleteRow(index) {
      this.$store.state.produce_workshop.splice(index, 1)
      console.log(this.$store.state.produce_workshop)
      this.$notify.error({
        title: '成功删除',
        message: '成功删除'
      })
    },
    add() {
      this.centerDialogVisible = true
      this.addnewlist = {}
    },
    search(item) {
      this.searchnewlist = []
      if (this.searchlist === '' || this.searchlist === null) {
        workshop.getshoplist()
      }
      this.$store.state.produce_workshop.filter(item => {
        if (item.localtion.indexOf(this.searchlist) !== -1) {
          this.searchnewlist.push(item)
          console.log(this.searchnewlist)
        }
      })
      this.$store.commit('workshoplist', { data: this.searchnewlist })
    },
    addlist() {
      this.centerDialogVisible = false
      this.addnewlist.id = this.$store.state.produce_workshop.length + 1
      this.$store.state.produce_workshop.push(this.addnewlist)
      console.log(this.addnewlist)
    },
    xiugai(index, row) {
      this.dialogVisible = true
      this.$store.commit('xiugai', { data: Object.assign({}, row) })
      this.updateData = this.$store.state.updateData
      // this.updateData = Object.assign({}, row)
    },
    ok() {
      this.dialogVisible = false
      for (let i = 0; i < this.$store.state.produce_workshop.length; i++) {
        const list = this.$store.state.produce_workshop[i]
        if (list.id === this.$store.state.updateData.id) {
          this.$store.state.produce_workshop[i] = this.$store.state.updateData
          Vue.set(this.$store.state.produce_workshop, i, this.$store.state.produce_workshop[i])
          this.$notify({
            title: '修改成功',
            message: '修改成功',
            type: 'success'
          })
        }
      }
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  }

}
</script>